@import '~@/styles/variables.scss';
@import '~@/styles/mixin.scss';

$footerHeight: 50px;
$asideHeight: calc(100vh - 70px - #{$footerHeight});

.processing-container {
  padding-bottom: $footerHeight;
  .processing-main {
    padding: 0;
    margin-right: 10px;
    & > .el-card {
      margin-bottom: 5px;
    }
    .r-card-header {
      line-height: 22px;
    }
  }
  .processing-aside {
    & > .el-card {
      min-height: $asideHeight;
    }
  }
}

.footer-card {
  >>> .el-card__body {
    padding: 0;
    height: $footerHeight;
    line-height: $footerHeight;
    text-align: center;
  }
}

// 聊天
.chat-box {
  $itemHeight: 44px;
  @include scrollBar;
  height: 50vh;
  overflow-y: scroll;
  padding: 15px;
  .divider-time {
    color: #b6b6b6;
    line-height: 20px;
    text-align: center;
  }
  .chat-item {
    display: flex;
    margin: 10px 0;
    &.mine-chat {
      flex-direction: row-reverse;
      .name-to-avatar {
        background: #9580f9;
      }
      .content {
        background: $primaryColor;
        box-shadow: 0px 0px 1px #5496f2;
        color: #fff;
      }
    }
    .name-to-avatar {
      height: $itemHeight;
      width: $itemHeight;
      background: #f56c6c;
      line-height: $itemHeight;
      text-align: center;
      color: #fff;
      border-radius: 100%;
    }
    .name {
      line-height: $itemHeight;
      margin: 0 0.5rem;
    }
    .content {
      max-width: 50%;
      background: #fff;
      box-shadow: 0px 0px 1px #fff;
      border-radius: 5px;
      .text {
        // line-height: $itemHeight;
        padding: 0 0.5rem;
      }
      .el-button {
        height: 100%;
      }
    }
  }
}
